import { useRef, useMemo } from 'react';
import { Button, Card, Icon } from 'element-react';
import { isWorkFlow } from '@/utils/application';
import { getImgUrl } from '@/utils/utils';

const KnowledgeSource = (props) => {
    const paragraphSourceDialogRef = useRef(null);
    const executionDetailDialogRef = useRef(null);

    const openParagraph = (row, id) => {
        if (paragraphSourceDialogRef.current) {
            paragraphSourceDialogRef.current.open(row, id);
        }
    };

    const openExecutionDetail = (row) => {
        if (executionDetailDialogRef.current) {
            executionDetailDialogRef.current.open(row);
        }
    };

    const uniqueParagraphList = useMemo(() => {
        const seen = new Set();
        return (props.data.paragraph_list || []).filter((paragraph) => {
            const key = paragraph.document_name.trim();
            if (seen.has(key)) {
                return false;
            }
            seen.add(key);
            if (paragraph.meta && typeof paragraph.meta ==='string') {
                paragraph.meta = JSON.parse(paragraph.meta);
                paragraph.source_url = paragraph.meta.source_url;
            }
            return true;
        });
    }, [props.data.paragraph_list]);

    return (
        <div>
            {!isWorkFlow(props.type) && (
                <div className="flex align-center mt-16">
                    <span className="mr-4 color-secondary">知识来源</span>
                    <Button type="primary" className="mr-8" link onClick={() => openParagraph(props.data)}>
                        <Icon name="setting" className="mr-4" />
                        引用原文
                    </Button>
                    <Button type="primary" className="mr-8" link onClick={() => openParagraphList(props.data)}>
                        引用分段 {props.data.paragraph_list?.length || 0}
                    </Button>
                </div>
            )}
            {!isWorkFlow(props.type) && uniqueParagraphList.length > 0 && (
                <div className="mt-8">
                    <div gutter={8}>
                        {uniqueParagraphList.map((item, index) => (
                            <div span={12} className="mb-8" key={index}>
                                <Card shadow="never" className="file-List-card" data-width="40">
                                    <div className="flex-between">
                                        <div className="flex">
                                            <img src={getImgUrl(item && item?.document_name)} alt="" width="20" />
                                            {!item.source_url ? (
                                                <div className="ml-4 ellipsis-1" title={item?.document_name}>
                                                    <p>{item && item?.document_name}</p>
                                                </div>
                                            ) : (
                                                <div className="ml-8">
                                                    <a
                                                        href={
                                                            item.source_url &&!item.source_url.endsWith('/')
                                                               ? item.source_url + '/'
                                                                : item.source_url
                                                        }
                                                        target="_blank"
                                                        className="ellipsis"
                                                        title={item?.document_name?.trim()}
                                                    >
                                                        <span title={item?.document_name?.trim()}>{item?.document_name}</span>
                                                    </a>
                                                </div>
                                            )}
                                        </div>
                                    </div>
                                </Card>
                            </div>
                        ))}
                    </div>
                </div>
            )}
            <div className="border-t color-secondary flex-between mt-12" style={{ paddingTop: '12px' }}>
                <div>
                    <span className="mr-8"> 消耗 tokens: {props.data?.message_tokens + props.data?.answer_tokens} </span>
                    <span> 耗时: {props.data?.run_time?.toFixed(2)} s</span>
                </div>
                {isWorkFlow(props.type) && (
                    <Button type="primary" link onClick={() => openExecutionDetail(props.data.execution_details)}>
                        <Icon className="mr-4" name="document">
                        </Icon>
                        执行详情
                    </Button>
                )}
            </div>
        </div>
    );
};

export default KnowledgeSource;